﻿@page "/DateRangePicker/Default-Functionalities"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The Blazor [Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) example demonstrates the default functionalities of the DateRangePicker. Today's date is always highlighted in the popup calendar and it get focused if there's no selected date. Select a date range from the popup calendar and the selected <code>date range</code> will be displayed in the DateRangePicker element.</p>
</SampleDescription>
<ActionDescription>
    <p><code>DateRangePicker</code> is an interactive component that allows the user to select a range from the calendar, or to set a range value.</p>
    <p>More information on the DateRangePicker instantiation can be found in the<a href='https://blazor.syncfusion.com/documentation/daterangepicker/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper">
        <div class="wrap">
            <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range"></SfDateRangePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>
